<script setup>
import { Modal } from 'view-ui-plus'
import {instance} from '@/js/axios_config'

import { setUserInfo } from '@/js/utils'
import router from '@/router'

const checkUser = (username, password) => {
  var jsonValue = JSON.stringify({ phone: username, password: password })
  instance({
    url: '/user/login',
    data: jsonValue,
    method: "POST"
  })
    .then((r) => {
      if (r.statusCode != 0) {
        Modal.warning({
          title: '警告',
          content: r.message,
        })
      } else {
        
        setUserInfo(r.data.id, r.data.name)
        Modal.success({
          title: '成功',
          content: r.message,
        })

        router.push({"path": "/"})
      }
    })
    .catch((e) => {
      Modal.error({
        title: '错误!',
        content: e,
      })
    })
}

const handleSubmit = (valid, { username, password }) => {
  if (valid) {
    checkUser(username, password)
  }
}
</script>

<template>
  <div class="demo-login">
    <Login @on-submit="handleSubmit">
      <UserName name="username" />
      <Password name="password" />
      <div class="demo-auto-login">
        <a>忘记密码</a>
      </div>
      <Submit />
    </Login>
  </div>
</template>

<style scoped>
.demo-login {
  padding-top: 30rem;
  width: 400px;
  margin: 0 auto !important;
}
.demo-auto-login {
  margin-bottom: 24px;
  text-align: left;
}
.demo-auto-login a {
  float: right;
}
</style>
